<template>
<div>
    <j-modal
      width="80%"
      :title="title"
      :visible.sync="editModalVisible"
      :fullscreen.sync="fullscreen"
      :switch-fullscreen="switchFullscreen"
      @cancel="handleCancleDbSync"
      :destroyOnClose="true"
    >
      <template slot="footer">
        <a-button @click="handleCancleDbSync">
          关闭
        </a-button>
      </template>
      <div class="table-page-search-wrapper warp" :style="{maxHeight:fullscreen?'779px':'588px'}">
        <div class="base-info">
            <p class="title">基本信息</p>
            <a-row class="base-content">
                <a-col :span="6">
                    <p><span class="info-title">数据源类型：</span>MaxCompute</p>
                </a-col>
                <a-col :span="6">
                    <p><span class="info-title">Project：</span>project</p>
                </a-col>
                <a-col :span="6">
                    <p><span class="info-title">表：</span>表名</p>
                </a-col>
                <a-col :span="6">
                    <p><span class="info-title">分区：</span>kfjdjfdlfj</p>
                </a-col>
                <a-col :span="6">
                    <p><span class="info-title">开始时间：</span>2019-08-23 12:34:23</p>
                </a-col>
                <a-col :span="6">
                    <p><span class="info-title">结束时间：</span>2019-08-23 12:34:23</p>
                </a-col>
            </a-row>
        </div>
        <div class="result-table">
            <p class="title">稽查结果-表级</p>
            <a-table
                class="table-style"
                size="middle"
                bordered
                rowKey="id"
                :columns="columns"
                :data-source="tableSource"
                :pagination="false"
                >
            </a-table>
        </div>
        <div class="result-field">
            <p class="title">稽查结果-字段</p>
            <a-table
                class="table-style"
                size="middle"
                bordered
                rowKey="id"
                :columns="fieldColumns"
                :data-source="fieldSource"
                :pagination="false"
                >
            </a-table>
        </div>
      </div>
    </j-modal>
</div>
</template>
<script>
const columns = [
    {
        title: '规则类型',
        dataIndex: 'ruleType',
    },
    {
        title: '稽查结果',
        dataIndex: 'resultVal',
    }
]
const fieldColumns = [
    {
        title: '字段',
        dataIndex: 'fieldName',
    },
    {
        title: '字段类型',
        dataIndex: 'fieldType',
    },
    {
        title: '空值数量',
        dataIndex: 'emptyNum',
    },
    {
        title: '空值率',
        dataIndex: 'emptyRate',
    },
    {
        title: '最大值',
        dataIndex: 'maxVal',
    },
    {
        title: '唯一率',
        dataIndex: 'uniqueRate',
    },
    {
        title: '最小值',
        dataIndex: 'minVal',
    },
    {
        title: '唯一值',
        dataIndex: 'uniqueVal',
    },
    {
        title: '重复率',
        dataIndex: 'repetitionRate',
    }
]
export default {
  name: 'PlanLogDetailModal',
  data() {
    return {
      editModalVisible: false,
      title: '校验计划日志详情',
      fullscreen: true,
      switchFullscreen: true,
      columns,
      fieldColumns,
      tableSource:[{id:1,ruleType:'存储大小',resultVal:'2.22KB'}],
      fieldSource:[{id:1,fieldName:'id',fieldType:'BIGINT',emptyNum:0,emptyRate:'0%',maxVal:9,uniqueRate:'100%',minVal:1,uniqueVal:9,repetitionRate:'0%'}]
    }
  },
  watch: {
    
  },
  mounted() {
  },
  methods: {
    handleCancleDbSync() { // 关闭
      this.editModalVisible = false
    },
    open() {
      this.editModalVisible = true
    }
  }
}
</script>
<style lang="less" scoped>
.table-page-search-wrapper{
    overflow:auto;
    padding:25px;
    .base-info{
        .base-content{
            padding-left:15px;
            .info-title{
                font-weight: bold;
                font-size:15px;
            }
        }
    }
    .title{
        font-size:18px;
        font-weight: bold;
        padding-left:10px;
        border-left:4px solid #1890FF;
        height:32px;
        line-height:32px;
    }
    .result-table{
        margin-top:16px;
    }
    .result-field{
        margin-top:30px;
    }
    .table-style{
        padding-left:15px;
    }
}
</style>
<style scoped>
@import '~@assets/less/common.less'
</style>